<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <link rel="stylesheet" href="./node_modules/mint-ui/lib/style.min.css">
  <link rel="stylesheet" href="./css/base.css">
</head>
<body>
  <div id="app">
        <mt-header>
                <a to="/" slot="left">
                  <mt-button icon="back">答题详情</mt-button>
                </a>
                <mt-button  slot="right"></mt-button>
        </mt-header>
        <section>
              <!-- 课时 -->
              <div class='classTime'> <p> 第一课时-友谊</p></div>
              <!-- 大题型 -->
              <div class="totalEx" v-for = "(item , index) in data" :key = 'item.id'>
                <div class='mdlEx' >
                  <p>{{index+1 | getB }} 、{{item.showType}} ( {{item.exeNumber}} 题 )</p>
                  <div class="smEx" >
                    <!-- 题目 -->
                    <div class='choiceTitle' v-for = '(inItem , in_index) in item.exercises' >
                    <span> {{inItem.id}}.</span>
                    <span v-html = inItem.scene></span>
                    <!-- 小题 -->
                    <div class="innerEx" v-for = '(smQ , smQ_index) in inItem.exercises'> 
                      <div class="exam">
                        <span>{{smQ.id}}.</span>
                        <span v-html = smQ.content></span>
                      </div>
                      <!-- 选项 -->
                      <div v-for = '(cho , cho_index) in smQ.exerciseSelections'>
                        <span>{{cho.name}}.</span>
                        <span v-html = cho.content></span>
                      </div>
                      <div class='answer'>
                        <p>
                          <span>正确答案:</span>
                          <span v-html = smQ.answer></span>
                        </p>
                        <!-- 图片答案 -->
                        <div v-for = "pic in smQ.picUrl">
                          <p>
                            <span>学生答案:</span>
                            <img :src ="pic.studentAnswer" alt="">
                            <!-- 得分 -->                           
                          </p>
                        </div>                       
                      </div>
                      <div class='getScore'>
                        <p>{{smQ.score}}/{{smQ.points}}分</p>
                      </div>
                    </div>
                    </div>
                  </div>
                </div>
              </div>
        </section>
  </div>
</body>
  <script src="./node_modules/vue/dist/vue.min.js"></script>
  <script src="./node_modules/mint-ui/lib/index.js"></script>
  <script src='./node_modules/axios/dist/axios.min.js'></script>
  <script>
   
    
     var vue = new Vue({
        el: '#app',
        data () { 
         return { 
           data: {},
           practiceId:[232],
           studentId:[191]
                }
        },
        created () {
          this.getExercise ()
        },
        methods : {        
               getExercise() {      
             axios({
               url: `api/teacher/all/${this.practiceId}/${this.studentId}`,
               method: 'get',
               headers: {
               Authorization: 'eyJhbGciOiJIUzI1NiJ9.eyJleHBpcmVBdCI6MTUxMzIxNjg1OTg0MiwiZXhwIjoxNTEzMjE2ODU5LCJ1c2VySWQiOjEwMDM2LCJjcmVhdGVBdCI6MTUxMjYxMjA1OTg0Mn0.DvvKCYAETm06juAStzzKf-uK1IE10PWDQzqWePRWlYY'
               }
              })
                   .then( res => {
                     var _this = this
                     _this.data = res.data.data
                   }) 
          }
        },
        //过滤器：数字改成中文
        filters :{
           getB(Num) {
                for(i = Num.length - 1; i >= 0; i--) {
        Num = Num.replace(" ", "")  //替换Num中的空格
                }
            if (isNaN(Num)) { //验证输入的字符是否为数字
              //alert("请检查小写金额是否正确");
              return;
            }
            //字符处理完毕后开始转换，采用前后两部分分别转换
            part = String(Num).split(".");
            newchar = "";
            //小数点前进行转化
            for (i = part[0].length - 1; i >= 0; i--) {
              if (part[0].length > 10) {
                //alert("位数过大，无法计算");
                return "";
              }//若数量超过拾亿单位，提示
              tmpnewchar = ""
              perchar = part[0].charAt(i);
              switch (perchar) {
                case "0": tmpnewchar = "零" + tmpnewchar; break;
                case "1": tmpnewchar = "一" + tmpnewchar; break;
                case "2": tmpnewchar = "二" + tmpnewchar; break;
                case "3": tmpnewchar = "三" + tmpnewchar; break;
                case "4": tmpnewchar = "四" + tmpnewchar; break;
                case "5": tmpnewchar = "五" + tmpnewchar; break;
                case "6": tmpnewchar = "六" + tmpnewchar; break;
                case "7": tmpnewchar = "七" + tmpnewchar; break;
                case "8": tmpnewchar = "八" + tmpnewchar; break;
                case "9": tmpnewchar = "九" + tmpnewchar; break;
              }
              switch (part[0].length - i - 1) {
                case 0: tmpnewchar = tmpnewchar; break;
                case 1: if (perchar != 0) tmpnewchar = tmpnewchar + "十"; break;
                case 2: if (perchar != 0) tmpnewchar = tmpnewchar + "百"; break;
                case 3: if (perchar != 0) tmpnewchar = tmpnewchar + "千"; break;
                case 4: tmpnewchar = tmpnewchar + "万"; break;
                case 5: if (perchar != 0) tmpnewchar = tmpnewchar + "十"; break;
                case 6: if (perchar != 0) tmpnewchar = tmpnewchar + "百"; break;
                case 7: if (perchar != 0) tmpnewchar = tmpnewchar + "千"; break;
                case 8: tmpnewchar = tmpnewchar + "亿"; break;
                case 9: tmpnewchar = tmpnewchar + "十"; break;
              }
              newchar = tmpnewchar + newchar;
            }
            //替换所有无用汉字，直到没有此类无用的数字为止
            while (newchar.search("零零") != -1 || newchar.search("零亿") != -1 || newchar.search("亿万") != -1 || newchar.search("零万") != -1) {
              newchar = newchar.replace("零亿", "亿");
              newchar = newchar.replace("亿万", "亿");
              newchar = newchar.replace("零万", "万");
              newchar = newchar.replace("零零", "零");
            }
            //替换以“一十”开头的，为“十”
            if (newchar.indexOf("一十") == 0) {
              newchar = newchar.substr(1);
            }
            //替换以“零”结尾的，为“”
            if (newchar.lastIndexOf("零") == newchar.length - 1) {
              newchar = newchar.substr(0, newchar.length - 1);
            }
            return newchar;
}
        }
        
     })
  </script>
  <style >
    p {
      line-height: 1.5rem;
    }
    img {
      width: 50%;
      height: 50%;
    }
      .mint-header {
      height: 3rem;
      background-color: #13D3D7;
      font-size: 1rem;
      border-bottom: 0.125rem #EAEAEA solid;
   }
   .mintui-back:before {
    content: "\E600";
    font-size: 1rem;
}
   
   section {
     padding: 1.5rem;
     font-size: 0.8rem;
   }
   section .classTime {
     text-align: center;
     
   }
   .totalEx {
     margin-top: 1rem;
   }
   .mdlEx {
     border-bottom: 1px solid #CCC;
   }
 
    .smEx {
      margin-top: 0.5rem;
      font-size: 0.8rem;
    }
    .smEx * {
      margin-bottom: 0.5rem;
    }
    .innerEx {
      position: relative;
    }
    .askAns {
      margin-top: 1rem;
    }
    .getScore {
      color: #D03E3E;
      font-size: 1.5rem;
      position: absolute;
      right: 0;
      bottom: 50%;
    }
  </style>
</html>